<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>服务反馈</title>
    <head>
        <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
        <script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../../jquery/bs_pagination/jquery.bs_pagination.min.css">
        <script type="text/javascript" src="../../jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
        <script type="text/javascript" src="../../jquery/bs_pagination/en.js"></script>
        <script type="application/javascript" src="../../jquery/commons/common.js"></script>
        <link href="../../jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="../../jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
        <script type="text/javascript" src="../../jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
        <script type="text/javascript">
            $(function () {
                //时间组件
                $(".time").datetimepicker({
                    minView: "month",
                    language:  'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });

                //为全选的复选框绑定事件，触发全选操作
                $("#qx").click(function () {

                    $("input[name=xz]").prop("checked",this.checked);

                });

                //获取服务类型，并赋值
                getCstType();
                function getCstType() {
                    $.ajax({
                        url : "service/getTypeService",
                        type : "get",
                        dataType : "json",
                        success : function (data) {

                            var html = "";

                            //遍历出来的每一个n，就是每一个user对象
                            $.each(data,function (i,n) {
                                html += "<option value='"+n.cstTypeId+"'>"+n.typeName+"</option>";
                            });

                            $("#service-type").html(html);

                        }

                    });
                }

                //对创建人下拉框赋值
                function getSysUserList(){
                    $.ajax({

                        url : "sysUser/getSysUserList",
                        type : "get",
                        dataType : "json",
                        success : function (data) {

                            var html = "";

                            //遍历出来的每一个n，就是每一个user对象
                            $.each(data,function (i,n) {
                                html += "<option value='"+n.userId+"'>"+n.userName+"</option>";
                            });

                            $("#distribution-creater").html(html);
                        }

                    });
                }
                getSysUserList();

                $("#fankuiBtn").click(function () {
                    var $xz = $("input[name=xz]:checked");
                    if($xz.length==0){
                        alert("请选择需要反馈的记录");
                    }else if($xz.length>1) {
                        alert("只能选择一条需要反馈的记录");
                        //肯定只选了一条
                    }else {
                        window.location.href = 'workbench/service/servicefeedback.jsp?svrId=' + $xz.val();
                    }
                });


                //为查询按钮绑定事件，触发pageList方法
                $("#searchBtn").click(function () {
                    /*
                        点击查询按钮的时候，我们应该将搜索框中的信息保存起来,保存到隐藏域中
                     */
                    $("#hidden-name").val($.trim($("#search-name").val()));
                    var name = $("#search-name").val();
                    pageList(1,2);
                });

                //进入客户管理页面，我们需要进行一次分页查询
                pageList(1,2);

                //用来处理分页请求
                function pageList(pageNo,pageSize) {

                    //将全选的复选框的√干掉
                    $("#qx").prop("checked",false);

                    //查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
                    $("#search-name").val($.trim($("#hidden-name").val()));
                    $.ajax({
                            //由于需要的数据和服务分配是差不多的我们这里直接选择使用服务分配的分页
                            url: "feedbackservice/"+pageNo+"/"+pageSize,
                            type: "get",
                            dataType: "json",
                            success: function (data) {

                                var html = "";

                                //每一个n就是每一个市场活动对象
                                $.each(data.dataList, function (i, n) {

                                    html += '<tr class="active">';
                                    html += '<td><input type="checkbox" name="xz" value="'+n.svrId+'"/></td>';
                                    html += '<td>'+n.svrCustName+'</td>';
                                    html += '<td>'+n.svrTitle+'</td>';
                                    html += '<td>'+n.svrType+'</td>';
                                    html += '<td>'+n.svrCreateBy+'</td>';
                                    html += '<td>'+new Date(n.svrCreateDate).format("yyyy-MM-dd")+'</td>';
                                    html += '</tr>';

                                });

                                $("#fankuiBody").html(html);
                                //计算总页数
                                var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;
                                //数据处理完毕后，结合分页查询，对前端展现分页信息
                                $("#fankuiPage").bs_pagination({
                                    currentPage: pageNo, // 页码
                                    rowsPerPage: pageSize, // 每页显示的记录条数
                                    maxRowsPerPage: 20, // 每页最多显示的记录条数
                                    totalPages: totalPages, // 总页数
                                    totalRows: data.total, // 总记录条数

                                    visiblePageLinks: 3, // 显示几个卡片

                                    showGoToPage: true,
                                    showRowsPerPage: true,
                                    showRowsInfo: true,
                                    showRowsDefaultInfo: true,

                                    //该回调函数时在，点击分页组件的时候触发的
                                    onChangePage: function (event, data) {
                                        pageList(data.currentPage, data.rowsPerPage);
                                    }
                                });

                            }
                        }
                    )}


                Date.prototype.format = function(fmt) {
                    var o = {
                        "M+" : this.getMonth() + 1, // 月份
                        "d+" : this.getDate(), // 日
                        "h+" : this.getHours(), // 小时
                        "m+" : this.getMinutes(), // 分
                        "s+" : this.getSeconds(), // 秒
                        "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
                        "S" : this.getMilliseconds()
                        // 毫秒
                    };
                    if (/(y+)/.test(fmt))
                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                            .substr(4 - RegExp.$1.length));
                    for ( var k in o)
                        if (new RegExp("(" + k + ")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                                : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }

            });
</script>
<body>
<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>服务反馈</h3>
        </div>
    </div>
</div>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">客户名称</div>
                        <input class="form-control" type="text" id="search-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">服务类型</div>
                        <select class="form-control" id="service-type">

                        </select>
                    </div>
                </div>

                <button type="submit" class="btn btn-default" id="searchBtn">查询</button>

            </form>
        </div>

        <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-default" data-toggle="modal"  id="fankuiBtn" ><span class="glyphicon glyphicon-plus"></span> 反馈</button>
                <button type="button" class="btn btn-danger"  id="deleteBtn"><span class="glyphicon glyphicon-remove"></span> 删除</button>
            </div>
        </div>

        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="qx" /></td>
                    <td>客户名称</td>
                    <td>概要</td>
                    <td>服务类型</td>
                    <td>创建人</td>
                    <td>创建时间</td>
                </tr>
                </thead>
                <tbody id="fankuiBody">
                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <div id="fankuiPage"></div>
        </div>

    </div>
</div>

</body>
</html>
